<!-- 任务配置_新增任务弹窗 -->
<template>
    <el-dialog title="新增任务" width="1300px" :visible.sync="dialogVisible" append-to-body :before-close="handleClose"
        :close-on-click-modal="false" :destroy-on-close="true">
        <div class="add-dialog">
            <div class="add-dialog-left">
                <el-form class="add-dialog-left__form" :inline="false" :model="submitForm">
                    <el-form-item label="任务名称">
                        <el-input v-model="submitForm.taskName"></el-input>
                    </el-form-item>
                    <el-form-item label="执行时刻">
                        <el-input v-model="submitForm.executeMoment"></el-input>
                    </el-form-item>
                </el-form>

                <div class="add-dialog-left__btn">
                    <el-button style="width: 100%;" class="jtyj-btn-primary">添加指令</el-button>
                </div>
            </div>
            <div class="add-dialog-right">
                <div class="add-dialog-right__title">
                    指令详情
                </div>
                <div class="add-dialog-right__split"></div>
                <el-table :data="submitForm.commandList" height="800px">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <VueForm style="padding-left: 60px;" :formProps="formProps" :formFooter="formFooter"
                                :schema="tempData.JsonSchemaData" v-model="tempData.JsonData">
                            </VueForm>
                        </template>
                    </el-table-column>
                    <el-table-column label="执行者" prop="executorId">
                        <template slot-scope="scope">
                            <el-input @focus="openInputDialog(scope, 'executorId')" readonly placeholder="点击选择执行者" v-model="scope.row.executorId"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="执行指令" prop="executeCommand">
                        <template slot-scope="scope">
                            <el-input @focus="openInputDialog(scope, 'executeCommand')" readonly placeholder="点击选择执行指令" v-model="scope.row.executeCommand"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="循环次数" prop="cycleTimes">
                        <template slot-scope="scope">
                            <el-input-number  v-model="scope.row.cycleTimes" :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="循环间隔" prop="cycleStep">
                        <template slot-scope="scope">
                            <el-input-number  v-model="scope.row.cycleStep" :min="0"></el-input-number>
                        </template>
                    </el-table-column>

                </el-table>

            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="jtyj-btn-cancel" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>

        <SelectEntityDialog ref="selectEntityDialogRef" :scenarioId="scenarioId"></SelectEntityDialog>
        <SelectCommandDialog ref="selectCommandDialogRef" ></SelectCommandDialog>
    </el-dialog>
</template>

<script>
import VerticalButtonMenu from '@/views/common-components/vertical-button-menu.vue';
import VueForm from '@lljj/vue-json-schema-form';
import SelectEntityDialog from "./select-entity-dialog.vue";
import SelectCommandDialog from "./select-command-dialog.vue";


export default {
    name: "AddDialog",
    data() {
        return {
            dialogVisible: false,
            submitForm: {
                taskName: "测试任务",
                executeMoment: '1000',
                commandList: [
                    {
                        executorId: "某航母",
                        executeCommand: "测试指令",
                        cycleTimes: "1",
                        cycleStep: "1"

                    }
                ]
            },
            activateCommandIndex: 0,
            commandList: [
                { label: "进攻弹发射" },
                { label: "进攻弹制导" }
            ],
            formFooter: {
                show: false, // 是否显示默认底部
                okBtn: '保存', // 确认按钮文字
                cancelBtn: '取消' // 取消按钮文字
            },
            formProps: {
                layoutColumn: 1, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效
                inline: true, // 行内表单模式，建议：开启时labelPosition不要配置top, antd不要配置labelCol wrapperCol
                inlineFooter: false, // 如果想要保存按钮和表单元素一行显示，需要配置 true
                labelSuffix: '：', // label后缀
                labelPosition: 'left', // 表单域标签的位置
                isMiniDes: true, // 是否优先mini形式显示描述信息（label文字和描述信息同行显示）
                defaultSelectFirstOption: true, // 单选框必填，是否默认选中第一个
                popover: {}, // 透传给ui 组件库的popver组件，比如element ui Popover，antd a-popover
                disabled: false
            },
            tempData: {
                "JsonSchemaData": {
                    "type": "object",
                    "properties": {
                        "chineseName": {
                            "type": "string",
                            "description": "中文名称",
                            "title": "中文名称"
                        },
                        "englishName": {
                            "type": "string",
                            "description": "英文名称",
                            "title": "英文名称"
                        },
                        "coordinates": {
                            "type": "object",
                            "properties": {
                                "x": {
                                    "type": "number",
                                    "description": "经度",
                                    "title": "经度",
                                    "default": 0
                                },
                                "y": {
                                    "type": "number",
                                    "description": "纬度",
                                    "title": "纬度",
                                    "default": 0
                                },
                                "z": {
                                    "type": "number",
                                    "description": "高度",
                                    "title": "高度",
                                    "default": 0
                                }
                            },
                            "x-apifox-orders": [
                                "x",
                                "y",
                                "z"
                            ],
                            "description": "位置(经纬高)",
                            "required": [
                                "x",
                                "y",
                                "z"
                            ],
                            "title": "位置"
                        },
                        "modelStepSize": {
                            "type": "number",
                            "description": "步长",
                            "title": "步长",
                            "default": 0
                        },
                        "currentHealth": {
                            "type": "number",
                            "description": "血量",
                            "title": "血量",
                            "default": 0
                        }
                    },
                    "x-apifox-orders": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ],
                    "required": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ]
                },
                "JsonData": {
                    "chineseName": "测试",
                    "englishName": "test",
                    "currentHealth": "111",
                    "coordinates": {
                        "x": 3,
                        "y": 2,
                        "z": 2
                    },
                    "modelStepSize": "11"
                }
            }

        }
    },
    components: {
        VerticalButtonMenu,
        VueForm,
        SelectEntityDialog,
        SelectCommandDialog
    },
    props: {
        scenarioId: {
            type: Number,
            default: 0,
        },
    },
    created() {

    },
    methods: {

        handleAddCommand() {
            console.log("添加指令");
        },

        handleClose(done) {
            this.dialogVisible = false;
        },

        openInputDialog(scope, openFlag){
            console.log(scope);
            console.log(openFlag);
            if (openFlag == "executorId") {
                this.$refs.selectEntityDialogRef.dialogVisible = true
            }else if (openFlag == "executeCommand") {
              this.$refs.selectCommandDialogRef.dialogVisible = true
            }
        }
    },

}

</script>

<style lang="scss" scoped>
.add-dialog {
    width: 1300px;
    height: 65vh;
    display: flex;

    .add-dialog-left {
        width: 180px;
        padding-right: 25px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .add-dialog-left__form {
            height: 166px;
            width: 160px;
            padding-left: 10px;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .add-dialog-left__btn {
            width: 100%;
            margin-top: 20px;
            padding-left: 10px;
        }
    }

    .add-dialog-right {
        width: 1090px;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        border-left: 1px solid var(--ui-border-color-split);
        height: 100%;
        overflow: auto;

        .add-dialog-right__title {
            font-size: var(--ui-font-size-title);
            font-weight: var(--ui-font-weight-semibold)
        }

        .add-dialog-right__split {
            margin-top: 30px;
            border-top: 1px solid var(--ui-border-color-split);
        }
    }
}
</style>